<template>
  <div class="glass-box">
    <draggable
      class="list-group"
      v-model="data.list"
      v-bind="data.dragOptions"
      @start="data.drag = true"
      @end="data.drag = false"
      item-key="order"
    >
      <template #item="{ element }" class="list-group-item">
        <AppIcon></AppIcon>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import draggable from 'vuedraggable'
import AppIcon from '../../AppIcon.vue'
const message = [1, 2, 3, 4, 5]
const data = reactive({
  drag: false,
  list: message.map((item, index) => {
    return { order: index + 1, name: item }
  }),
  dragOptions: {
    animation: 500,
    group: 'description',
  },
})
</script>

<style scoped>
.glass-box {
  /* display: inline-block; */
  height: 100%;
  padding: 5px;
  border: 1px dashed;

  /* background: rgba(255, 255, 255, 0.2); */
  /* -webkit-backdrop-filter: blur(8px); */
  /* backdrop-filter: blur(8px); */
  border-radius: 14px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1);
}
.list-group {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(auto-fill, 60px);
  grid-template-rows: repeat(auto-fill, 60px);
}

.mini {
  height: 120px;
  grid-template-columns: repeat(2, 60px);
  grid-template-rows: repeat(2, 60px);
}

.middle {
  height: 180px;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 60px);
}
.large {
  height: 240px;
  grid-template-rows: repeat(4, 60px);
  grid-template-columns: repeat(3, 60px);
}
</style>
